<template>
	<!-- 普通支付订单 -->
    <div class="member-addmember">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "分销"},{"name": "添加人员", "url": "/addmember"}]'></tz-breadcrumb>
      <!-- 数据表单 -->
<div style="margin: 20px;"></div>
    <el-form class="form" label-width="80px">
      <el-form-item label="真实姓名">
        <el-input class="form-input" v-model="form.realname" placeholder='真实姓名输入全英文或者全中文,如‘王林’或‘Alan.Smith’'></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input  class="form-input" v-model="form.phone" placeholder='请输入真实的手机号码'></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="form.role_id" placeholder="请选择 角色">
          <el-option v-for="item in superiorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="form.promoter_id" placeholder="请选择 上线人员">
          <el-option v-for="item in roleList" :key="item.id" :label="item.realname" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分佣比率">
        <el-input  class="form-input" v-model="form.bkge_ratio" style="width:50px"></el-input> % <span class="tip">请输入1-100之间的数值</span>
      </el-form-item>
      <el-form-item label="密码" >
        <el-input type='password'  class="form-input" v-model='form.password' placeholder='密码至少8位，字母、数字、特殊符号（必须包含其中两个）'></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type='password' class="form-input" v-model="form.confirm_password"  placeholder="请确认密码"></el-input>
      </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="onSubmit" v-loading.fullscreen.lock="fullscreenLoading">添加人员</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data () {
    return {
      makesure: true,
      form: {
        phone: '',
        realname: '',
        bkge_ratio: 50,
        confirm_password: '',
        password: '',
        role_id: '',
        promoter_id: '',
        token: localStorage.getItem('token')
      },
      superiorList: [],
      roleList: [],
      fullscreenLoading: false
    };
  },
  mounted () {
    let that = this;
    that.getOnLineList();
    // 获取角色列表
    http.get(api.RoleList, {
      token: localStorage.getItem('token')
    }, (res) => {
      console.log(res);
      console.log(2223);
      if (res.code === '10001') {
        that.superiorList = res.data[0].list;
      } else {
        that.$message.error(res.msg);
      }
    }, (err) => {
      console.log(err);
      that.$message.error('网络错误,请稍后再试');
    });
  },
  methods: {
    getOnLineList () {
      let that = this;
      // 获取上线人员列表
      http.get(api.member, {
        token: localStorage.getItem('token')
      }, (res) => {
        console.log(res);
        console.log(2222);
        if (res.code === '10001') {
          that.roleList = res.data;
        } else {
          that.$message.error(res.msg);
        }
      }, (err) => {
        console.log(err);
        that.$message.error('网络错误,请稍后再试');
      });
    },
    // 添加人员
    onSubmit () {
      let that = this;
      // var mobilephoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      var regmobilePhone = /^1[34578]\d{9}$/;
      // 请求前判断
      // var regRealName = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
      // 验证真实姓名全英文或者全中文，最少2字符英文可以带.,中文不可以
      var regRealName = /^([A-Za-z_. ]{6,20}|[\u4e00-\u9fa5]{2,20})$/;
      // 验证密码至少8位，字母、数字、特殊符号（必须包含其中两个）
      var regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[\w~!@#$%^&*()_+`\-={}:";'<>?,./]{8,}$/;
      if (that.form.realname === '') {
        that.$message.error('请输入真实姓名');
        return false;
      } else if (!regRealName.test(that.form.realname)) {
        that.$message.error('真实姓名输入有误，请重新输入');
        return false;
      } else if (that.form.phone === '' || !regmobilePhone.test(that.form.phone)) {
        that.$message.error('请输入真实的手机号码');
        return false;
      } else if (that.form.role_id === '') {
        that.$message.error('请选择用户角色');
        return false;
      } else if (that.form.bkge_ratio * 1 === 0) {
        that.$message.error('请输入分佣比率');
        return false;
      } else if (!(that.form.bkge_ratio * 1 > 0 && that.form.bkge_ratio * 1 < 101)) {
        that.$message.error('输入分佣比率格式不正确,最小为1，最大为100');
        return false;
      } else if (that.form.password === '') {
        that.$message.error('请输入密码');
        return false;
      } else if (!regPassword.test(that.form.password)) {
        that.$message.error('密码至少8位，字母、数字、特殊符号（必须包含其中两个）');
        return false;
      } else if (that.form.confirm_password === '') {
        that.$message.error('请确认密码');
        return false;
      } else if (that.form.confirm_password !== that.form.password) {
        that.$message.error('两次密码输入不一致');
        return false;
      };
      if (!that.makesure) {
        return false;
      }
      that.makesure = false;
      that.fullscreenLoading = !that.fullscreenLoading;
      // 请求添加人员api
      http.post(api.UserAdd, that.form, (res) => {
        console.log(res);
        that.fullscreenLoading = !that.fullscreenLoading;
        if (res.code === '10001') {
          that.$message.success('添加成功');
          that.getOnLineList();
          that.form.realname = '';
          that.form.phone = '';
          that.form.role_id = '';
          that.form.bkge_ratio = '';
          that.form.promoter_id = '';
          that.form.password = '';
          that.form.confirm_password = '';
          setTimeout(() => {
            that.makesure = true;
          }, 3000);
          return false;
        };
        that.$message.error(res.msg);
        that.makesure = true;
      }, (err) => {
        console.log(err);
        that.fullscreenLoading = !that.fullscreenLoading;
        that.makesure = true;
        that.$message.error('网络异常，请稍后再试');
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding 2rem
  padding-right 200px
  margin-top 15px
  margin-bottom 12px
  box-sizing border-box
  background #fff
  box-shadow 1px 1px 1px #999
  .form-item
    display inline-block
    margin-right 35px
    label
      font-size 14px
      color #333
      width 70px
      display inline-block
    .form-input, .form-select
      width 200px
  .line
    height 15px
.server-item
  width 20px
  height 20px
  margin 5px
.tip
  color:#f00;
  margin-left: 10px
</style>
